<template>
  <div>
    <video v-if="type==='http'"  autoplay controls width="100%" height="400" id="videoElement"></video>
    <div v-else class="video" id="video_two" style="height: 400px;" ></div>
  </div>
</template>
<script>
  import flvjs from "flv.js";

  export default {
    name: "Video",
    props:{
      url:{
        type: String
      },
      type:{
        type: String,
        default: 'http'
      }
    },
    data() {
      return {
        // ckplayer Config
        video:{
          one:{
            container: '#video_one', //容器的ID或className
            variable: 'player',//播放函数名称
            autoplay:true,
            live:true,
            video: '',//视频地址-rtmp的地址就可以
          },
          two:{
            container: '#video_two', //容器的ID或className
            variable: 'player',//播放函数名称
            autoplay:true,
            live:true,
            //ffmpeg -i rtsp://admin:admin@192.168.1.100:8557/h264 -f flv -r 25 -s 960*601 -an rtmp://192.168.211.129:1935/stream/hello2
            video: this.url,//视频地址
          }
        },
        // flv.js   Config

      }
    },
    methods: {
      // rtmp
      createCkplayerVideo(){
        // eslint-disable-next-line no-undef,no-unused-vars
        var player = new ckplayer(this.video.two);
      },
      // http
      createFlvVideo() {
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById('videoElement');
          var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.url //你的url地址
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
        }
      }
    },
    mounted() {
      if (this.type === 'http'){
        this.$nextTick(() => {
          this.createFlvVideo()
        })
      }else {
        this.createCkplayerVideo()
        console.log(this.url)
      }
    }
  }
</script>

<style scoped>

</style>
